<template>
	<view :id="'lupopupWrapper'+popupId" class="lu-popup-wrapper" :class="popupClass" >
		<view class="lu-popup-content" :class="popupContentClass" :style="[{height:height,width:width,backgroundColor:backgroundColor}]">
			<slot></slot>
		</view>
		<view v-if="maskShow" class="lu-popup-mask" @tap="close(maskClick)"></view>
	</view>
</template>

<script>
	export default {
		name:"lu-popup-wrapper",
		props: {
			type:{
				type:String,
				default:"center"// left right top bottom center
			},
			transition:{
				type:String,
				default:"none"//none slider fade
			},
			backgroundColor:{
				type:String,
				default:'transparent'//transparent
			},
			active:{
				type:Boolean,
				default:false
			},
			height:{
				type:[String],
				default:"100%"
			},
			width:{
				type:[String],
				default:"100%"
			},
			popupId:{
				type:[String,Number],
				default:0
			},
			maskShow:{
				type:Boolean,
				default:true
			},
			maskClick:{
				type:Boolean,
				default:true
			},
			closeCallback:{
				type:Function,
			},
		},
		data() {
			return {
				newActive:this.active,
				newTransition:true
			};
		},
		computed:{
			popupClass:function () {
				let _class = "";
				if (this.newActive) {
					_class+="lu-popup-active";
				}
				let arrType =["left","right","top","bottom","center"];
				if (arrType.indexOf(this.type)!==-1&&this.type!=='center') {
					_class+=" lu-popup-"+this.type;
				}
				return _class;
			},
			popupContentClass:function () {
				let _class = "";
				let arrTransition =["none","slider","fade"];
				if (!!this.newTransition&&arrTransition.indexOf(this.transition)!==-1&&this.transition!=='none') {
					_class+="lu-popup-transition-"+this.transition;
				}
				return _class;
			}
		},
		methods:{
			show:function () {
				this.newActive = true;
				let _this = this;
				setTimeout(function () {
					_this.newTransition = false;
				},50)
			},
			close:function (v) {
				let close = v==false?false:true;
				if (close) {
					this.newTransition = true;
					let _this=this;
					setTimeout(function () {
						_this.newActive = false;
						if (typeof(_this.closeCallback)=="function" ) {
							_this.closeCallback();
						}
					},300)
				}
			}
		}
	}
</script>

<style lang="scss">
	lu-popup-wrapper{
		position: absolute;
	}
	.lu-popup-wrapper{
		position: fixed;
		z-index: 998;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		display: none;
		&.lu-popup-active{
			display: flex;
		}
		&.lu-popup-left{
			justify-content: flex-start;
			.lu-popup-transition-slider{
				transform: translate3d(-100%,0,0);
			}
		}
		&.lu-popup-right{
			justify-content: flex-end;
			.lu-popup-transition-slider{
				transform: translate3d(100%,0,0);
			}
		}
		&.lu-popup-top{
			align-items: flex-start;
			.lu-popup-transition-slider{
				transform: translate3d(0,-100%,0);
			}
		}
		&.lu-popup-bottom{
			align-items: flex-end;
			.lu-popup-transition-slider{
				transform: translate3d(0,100%,0);
			}
		}
		.lu-popup-content{
			z-index: 2;
			height: 100%;
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;
			transform: translate3d(0,0,0) scale(1);
			opacity: 1;
			transition: transform .3s ease-in-out,opacity .3s ease-in-out;
			&.lu-popup-transition-fade{
				transform: translate3d(0,0,0) scale(0.3);
				opacity: 0;
			}
		}
		.lu-popup-mask{
			position: absolute;
			transition:all 1s ;
			z-index: 1;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(#000, 0.75);
		}
	}
</style>
